<template>
  <div class="my-table">
    <table>
      <thead>
        <tr>
          <template v-for="(item, index) in xyData" :key="index">
            <th>{{item.name}}</th>
          </template>
        </tr>
      </thead>
      <tbody>
      <tr>
        <template v-for="(item, index) in xyData" :key="index">
          <td>{{item.value}}</td>
        </template>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted, PropType, watch } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem } from 'stores/editorModels';
import { CGridPropertyItem } from './gridViewModel';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';



export default defineComponent({
  name: 'ViewGrid',
  props: {
    detail: {
      type: Object as PropType<CGraphEntity>,
      default: {} as CGraphEntity
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },
  setup (props, context) {
    // 响应数据解构
    const {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CGridPropertyItem>({
      title: '',
      fillColor: ''
    })

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);

    //属性更新
    const configProperty = () => {

    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });

    return {
      detail,
      xyData
    };
  }
});
</script>

<style lang="scss" scoped>
.my-table {
  margin: 0px;
  width: 100%;
  height: 100%;
  background: #dfe5f5;
  table {
    border-collapse: collapse;
    text-align: center;
    th, td {
      margin: 0px;
      padding: 0px;
      border: 1px solid #818487;
      color: #666;
      height: 30px;
    }
    thead th {
      background-color: #829dec;
      width: 250px;
    }
    tbody td {
      width: auto;
    }
    tr:nth-child(odd) {
      background: #a8a3a3;
    }
    tr:nth-child(odd) {
      background: #d8dede;
    }
  }
}
</style>
